//完成选择分类==>下拉模块的渲染
/* 1.发起请求,获取到所有的类别====发送了改变,或者页面的跳转,就需要再次发送请求 */
axios.get(
    "http://api-breakingnews-web.itheima.net/my/article/cates",
    {headers:{Authorization:localStorage.getItem("token")}}
  ).then(({data:res})=>{
    //   layer.msg(res.message)
      console.log(res);
      if(res.status===0){
          res.data.forEach(obj=>{

            // 这里生成的标签中,如果没有设置value的值,正则的判断就不会生效
            let Opt=`<option value="${obj.Id}" lay-verify="cate">${obj.name}</option>`
            $("select").append(Opt)
            //获取请求成功后,容器中没有渲染成功
            //分析==请求成功了,服务器有数据返回过来,现在是遍历过程中,标签没有添加到容器中,检查标签是否成功生成了
            // console.log(Opt); //打印发现标签是成功生成了,那么就检查添加的容器是否有问题
            //发现在容器中显示了,但是没有显示出来,可能是渲染的时候出现了问题===>对比平时的使用就多了
            //一个layer的插件,查看插件文档=====>查看文档,发现动态插入的标签,需要从新更新一次
            form.render('select', 'edit')
          })
      }
  })

//功能由上到下完成===>现在需要完成文本域功能===>这里在文本域中引入了一个插件
//可以扩展文本域的功能======>这里需要初始化富文本插件
initEditor()   //这里引入的方法中,里面会设置好,以那个容器在装这个插件
let img=""
//完成图片选择功能
$(".select").on("click",function () {
  $("#file").click()
})
//完成输入框的change事件
$("#file").on("change",function(e) {
  let file=e.target.files
    if(file.length===0)return 
    //获取到图片地址,给img框
    let theUrl=window.URL.createObjectURL(file[0])
    $("#image").prop("src",theUrl)
    img=file[0]
})

//完成文章信息===表单的提交
/*  */
$("form").on("submit",function (e) {
  e.preventDefault()
  if(!img)return layer.msg("请选择图片")
  //查看文档===发现必选参数有5条,需要在发起请求之前,一一获取到
  //标题和状态可以直接获取到
  const htmlStr = tinyMCE.activeEditor.getContent()  //3.获取到文本域中的内容
  //这里的参数是DOM对象,需要通过JQ转为js
  let fd=new FormData($("form")[0])   //图片文件需要fd格式,之前需要先创造实列,在添加内容,现在直接在里面传参数
  fd.set("content",htmlStr)  //这里的set方法添加,可以覆盖里面同属性的内容
  // 还需要添加图片信息==二进制
  fd.append("cover_img",img)
  // fd.forEach((value,title)=>{
    // console.log(value,title);
  // })
  // 这里添加的内容看不到,需要遍历才可以看到,好像fd格式都是这样的,添加后,内容都看不到
  //内容获取成功====现在开始发送请求=====>这里为什么使用fd格式,因为这里是有图片文档信息的
  axios.post(
    "http://api-breakingnews-web.itheima.net/my/article/add",
    fd,
    {headers:{Authorization:localStorage.getItem("token")}}
  ).then(({data:res})=>{
    layer.msg(res.message)
    // console.log(res)})
    if(res.status===0) {
      //发布文章成功了==>需要跳转页面
      setTimeout(function () {
        location.href="../list/list.html"
      },500)

      //完成对应导航高亮的效果===子网页操作父网页
      // window.parent.$("#wzlist>a")[0].click()   //这是一种方法
      window.parent.$("#wzlist>a").click()    //如果这样写,就需要更改js文件引入顺序了 
      //因为layui有自己的JQ方法,里面的页面渲染使用了layui方法,需要覆盖JQ的,也就是越原始的东西,越需要在最上层
    }
  })  
})


  //需要给表单的输入框设定输入规定
const form = layui.form;
form.verify({
    articleTitle: [
       /^[\u4E00-\u9FA5a-zA-Z0-9_-]+$/,
    "标题只能是中英文, 数字下划线中划线组成"
    ],
   
    cate: function(){
        return $("select[name=cate_id]").val().length == 0 && "请选择文章类别"
        // 这里判断的是下拉框中value里面的值,也就是option标签中,value的值
    }
})   